import { Card, Avatar } from "antd";
import { FireOutlined } from "@ant-design/icons";
import styles from "./AgentCard.module.scss";
import { Agent } from "../../types";

interface AgentCardProps {
  agent: Agent;
  onSelect: (agentId: number) => void;
}

const AgentCard = ({ agent, onSelect }: AgentCardProps) => {
  // 检查是否为热门AI助手（这里假设有一个isHot属性，如果没有可以根据实际情况调整判断逻辑）
  const isHot = agent.isHot || true;

  return (
    <Card
      hoverable
      className={styles.agentCard}
      onClick={() => onSelect(agent.ID)}
    >
      {isHot && (
        <div className={styles.hotBadge}>
          <FireOutlined /> 热门
        </div>
      )}

      <div className={styles.cardContent}>
        <div className={styles.avatarContainer}>
          <Avatar src={agent.AIAvatar} size={64} className={styles.avatar} />
        </div>

        <div className={styles.infoContainer}>
          <div className={styles.header}>
            <h3 className={styles.name}>{agent.AIName}</h3>
          </div>
          <p className={styles.description}>{agent.AIDesc}</p>
        </div>
      </div>
    </Card>
  );
};

export default AgentCard;
